<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>系统参数设置</title>
  <link href="../../../css/bootstrap.css" rel="stylesheet">
</head>
<body>
<style>
  .container {
    display: flex;
  }
  .menu {
    flex: 1;
  }
  .content {
    flex: 2;
    margin-top: 3cm; /* 将内容下移3厘米 */
  }
</style>
<!-- 包含头部和导航栏 -->
<div class="container">
<div class="menu">

<div th:replace="twoGroup/twoGroup.html"></div>
</div>
<div class="content">

    <h2>新增站点设置</h2>
    <button id="addSiteButton" class="btn btn-primary">新增站点</button>
    <form id="siteSettingForm" style="display: none;">
      <div class="form-group">
        <label for="siteName">站点名称</label>
        <input type="text" class="form-control" id="siteName">
      </div>
      <div class="form-group">
        <label for="siteLogo">站点Logo</label>
        <input type="text" class="form-control" id="siteLogo">
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>

    <!-- <table class="table table-striped">
        <thead>
        <tr>
          <th>编号</th>
          <th>站点名称</th>
          <th>站点Logo</th>
          <th>操作</th>
        </tr>-->
    <!--<div class="row">
      <div class="col-12">
          &lt;!&ndash;<%&#45;&#45; &#45;&#45;%>&ndash;&gt;-->
    <table class="table table-hover table-bordered table-sm">
      <thead>

      <tr>
        <th>编号</th>
        <th>站点名称</th>
        <th>站点Logo</th>
        <th>操作</th>
      </tr>

      </thead>
      <tbody>
      <!-- 这里使用Thymeleaf的语法渲染数据 -->
      <tr th:each="site : ${List}">
        <td th:text="${site.id}"></td>
        <td th:text="${site.siteName}"></td>
        <td th:text="${site.siteLogo}"></td>
        <td>
          <button type="button" style="size: 10px" class="btn btn-danger" data-siteid="${site.id}" onclick="deleteSite(event)">删除站点</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

</body>
<script src="../../../js/jquery-3.3.1.min.js"></script>
<script>
  $(document).ready(function() {
    // 点击新增站点按钮显示表单
    $("#addSiteButton").click(function() {
      $("#siteSettingForm").toggle();
    });

    // 页面加载完成后发送Ajax GET请求获取站点数据
    $.ajax({
      type: "GET",
      url: '/setting/sites',
      success: function(data) {
        // 渲染站点数据到表格中
        data.forEach(function(site) {
          $("tbody").append(
                  "<tr>" +
                  "<td>" + site.id + "</td>" +
                  "<td>" + site.siteName + "</td>" +
                  "<td>" + site.siteLogo + "</td>" +
                  "<td>" +
                  "<button type='button' class='btn btn-danger' data-siteid='" + site.id + "' onclick='deleteSite(event)'>删除站点</button>" +
                  "</td>" +
                  "</tr>"
          );
        });
      }
    });
  });

  $("#siteSettingForm").submit(function(event) {
    event.preventDefault();
    let datas = {
      siteName: $("#siteName").val(),
      siteLogo: $("#siteLogo").val()
    };

    $.ajax({
      type: "POST",
      url: '/setting/add',
      data: JSON.stringify(datas),
      contentType: "application/json",
      success: function(data) {
        alert("成功");
        window.location.reload()
      }
    });
  });

  function deleteSite(event) {
    let siteId = $(event.target).data('siteid'); // 获取站点编号

    $.ajax({
      type: "POST",
      url: `/setting/delete/${siteId}`,
      contentType: "application/json",
      success: function() {
        alert("站点删除成功");
        window.location.reload()
      },
      error: function() {
        alert("站点删除失败");
        window.location.reload()
      }
    });
  }
</script>
<div th:replace="twoGroup/twoGroupmain.html"></div>
</html>
